<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})"></head>
<body>
<div class="layui-form base-dialog user-info-page">
    <div class="user-info">
        <!-- 头像框 -->
        <div class="user-avatar-box">
            <th:block th:switch="${entity.cover}">
                <img class="user-avatar" th:case="null" th:src="@{/static/img/defaultHead.png}">
                <img class="user-avatar" th:case="*" th:src="@{${entity.cover}}">
            </th:block>
<!--            <span class="edit-avatar">修改头像</span>-->
        </div>
        <ul class="detail-info">
            <li>账号：<span th:text="${entity.account}"></span></li>
            <li>名称：<span th:text="${entity.userName}"></span></li>
        </ul>
    </div>
    <form class="user-edit">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="userName" th:value="${entity.userName}"
                       lay-verify="required|userName" autocomplete="off" placeholder="请输入姓名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="phone" th:value="${entity.phone}"
                       lay-verify="required|phone|number" autocomplete="off" placeholder="请输入电话号码">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="email" th:value="${entity.email}" lay-verify="required|email"
                       autocomplete="off" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男" th:checked="${entity.sex} eq 1">
                <input type="radio" name="sex" value="2" title="女" th:checked="${entity.sex} eq 2">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="description" lay-verify="required|description" placeholder="请输入备注信息">[[${entity.description}]]</textarea>
            </div>
        </div>
        <div class="layui-form-item base-finally">
            <!-- 隐藏表单域 -->
            <input type="hidden" id="id" name="id" th:value="${entity.id}">
            <input type="hidden" id="cover" name="cover" th:value="${entity.cover}">
            <button class="layui-btn" lay-submit lay-filter="update"><i class="fa fa-check-circle"></i> 保存
            </button>
            <a class="layui-btn btn-secondary base-close-dialog"><i class="fa fa-times-circle"></i> 取消</a>
        </div>
    </form>
</div>
</body>

<script th:replace="/sys/base :: scriptFragment"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery', 'form', 'upload'], function () {
        var $ = layui.jquery;
        var form = layui.form;

        /**
         * 提交表单
         */
        form.verify({ // TODO 自定以表单校验规则
            userName: function (value, item) {
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return "用户名不能有特殊字符";
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return "用户名首尾不能出现下划线\'_\'";
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return "用户名不能全为数字";
                }
                if (!/^[\u4e00-\u9fa5]{2,10}$/.test(value)) {
                    return "只能输入2到10个汉字";
                }
            }
            ,description: function (value, item) {
                if (value.length > 20) {
                    return "备注信息在20个有效字符以内";
                }
            }
        });
        form.on('submit(update)', function (data) { // TODO 提交表单
            $.ajax({
                url: $.getProjectNameLI() + "/sys/admin/updateUserInfo",
                async: false,
                type: "post",
                dataType: "json",
                data: data.field,
                success: function (res) {
                    layer.msg(res.code === 0 ? "更新成功" : res.message, {time: 1500}, function () {
                        window.top.location.reload();
                    });
                }
                ,complete: function (xhr) {
                    $.ajaxCompleteLI(xhr);
                }
            });
            return false;
        });

        /**
         * 上传头像图片
         */
        // var upload = layui.upload;
        // var files = [];
        // var image = new Image();
        // var uploadInst = upload.render({ // TODO 创建上传文件组件
        //     elem: '.edit-avatar'
        //     , bindAction: ".upload-btn"
        //     , field: 'file' // 服务器接收该文件的标识
        //     , url: $.getProjectNameLI() + "/asyn/uploadImage"
        //     , data: {account: [[${entity.account}]], category: "cover"} // 附加参数
        //     , exts: 'jpg|png|gif|jpeg'
        //     , auto: false // 关闭自动上传
        //     , choose: function (obj) { // 选择文件回调
        //         obj.preview(function (index, file, result) {
        //             panel.show();
        //             $(".canvas-group").show();
        //             image.src = result;
        //             image.onload = function () {
        //                 bgImg.attr("src", result);
        //                 if (bgImg.width() >= bgImg.height()) {
        //                     bgImg.css("height", canvas.width());
        //                 } else {
        //                     bgImg.css("width", canvas.height());
        //                 }
        //                 bgImg.css("top", (panel.height() - bgImg.height()) / 2);
        //                 bgImg.css("left", (panel.width() - bgImg.width()) / 2);
        //                 renderPanel();
        //             }
        //         });
        //     }
        //     , before: function (obj) { // 上传文件前回调
        //         files = obj.pushFile();
        //         var index, file;
        //         for (index in files) {
        //             file = files[index];
        //         }
        //         var dataurl = canvas[0].toDataURL(file.type, 0.92);
        //         var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        //             bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        //         while (n--) {
        //             u8arr[n] = bstr.charCodeAt(n);
        //         }
        //         files[index] = new File([u8arr], file.name, {type: mime});
        //     }
        //     , done: function (res, index) { // 上传文件后回调
        //         if (res.code === 0) {
        //             panel.hide();
        //             $(".canvas-group").hide();
        //             $(".user-avatar").attr("src", canvas[0].toDataURL());
        //             delete files[index];
        //             $("#cover").val(res.data.saveRelativePath_0);
        //             layer.msg("上传头像成功", {time: 1000});
        //         } else {
        //             layer.msg(res.message, {time: 1000});
        //         }
        //     }
        // });
    });
</script>

</html>